@model EIMS.Models.ViewModels.SupplierReportViewModel

@{
    ViewData["Title"] = "供应商报表";
}

@section Styles {
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.css">
}

<div class="container-fluid">
    <h1 class="h3 mb-4 text-gray-800">供应商数据分析</h1>

    <!-- 返回按钮 -->
    <div class="mb-3">
        <a href="@Url.Action("Index", "Report")" class="btn btn-light btn-sm">
            <i class="fas fa-arrow-left"></i> 返回报表中心
        </a>
    </div>
    
    <div class="row">
        <div class="col-xl-8 col-lg-7">
            <!-- 供应商类型分布图 -->
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-success">供应商类型分布</h6>
                </div>
                <div class="card-body">
                    <div class="chart-pie">
                        <canvas id="supplierTypeChart"></canvas>
                    </div>
                </div>
            </div>

            <!-- 供应商信用等级分布图 -->
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-success">供应商信用等级分布</h6>
                </div>
                <div class="card-body">
                    <div class="chart-bar">
                        <canvas id="supplierCreditChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-4 col-lg-5">
            <!-- 供应商地区分布图 -->
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-success">供应商地区分布</h6>
                </div>
                <div class="card-body">
                    <div class="chart-pie">
                        <canvas id="supplierRegionChart"></canvas>
                    </div>
                </div>
            </div>

            <!-- 导出选项 -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-success">数据导出</h6>
                </div>
                <div class="card-body">
                    <p class="mb-3">将供应商数据导出为Excel格式，方便离线分析。</p>
                    <a href="@Url.Action("ExportSuppliers", "Report")" class="btn btn-success btn-block">
                        <i class="fas fa-file-excel"></i> 导出供应商数据
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- 最近添加的供应商 -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-success">最近添加的供应商</h6>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th>供应商名称</th>
                            <th>联系人</th>
                            <th>联系电话</th>
                            <th>电子邮箱</th>
                            <th>供应商类型</th>
                            <th>信用等级</th>
                            <th>状态</th>
                            <th>添加时间</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var supplier in Model.RecentSuppliers)
                        {
                            <tr>
                                <td><a href="@Url.Action("Details", "Supplier", new { id = supplier.Id })">@supplier.Name</a></td>
                                <td>@supplier.ContactPerson</td>
                                <td>@supplier.ContactPhone</td>
                                <td>@supplier.Email</td>
                                <td>@supplier.Type</td>
                                <td>@supplier.CreditRating</td>
                                <td>@supplier.Status</td>
                                <td>@supplier.CreatedAt.ToString("yyyy-MM-dd")</td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
    <script>
        // 设置Chart.js全局选项
        Chart.defaults.global.defaultFontFamily = 'Nunito, "Microsoft YaHei", sans-serif';
        Chart.defaults.global.defaultFontColor = '#858796';
        
        // 供应商类型分布图
        var typeCtx = document.getElementById("supplierTypeChart");
        var typeChart = new Chart(typeCtx, {
            type: 'doughnut',
            data: {
                labels: [@Html.Raw(string.Join(",", Model.SuppliersByType.Select(s => "'" + s.Label + "'")))],
                datasets: [{
                    data: [@string.Join(",", Model.SuppliersByType.Select(s => s.Value))],
                    backgroundColor: ['#1cc88a', '#4e73df', '#36b9cc', '#f6c23e', '#e74a3b', '#858796'],
                    hoverBorderColor: "rgba(234, 236, 244, 1)",
                }],
            },
            options: {
                maintainAspectRatio: false,
                tooltips: {
                    backgroundColor: "rgb(255,255,255)",
                    bodyFontColor: "#858796",
                    borderColor: '#dddfeb',
                    borderWidth: 1,
                    xPadding: 15,
                    yPadding: 15,
                    displayColors: false,
                    caretPadding: 10,
                },
                legend: {
                    display: true,
                    position: 'bottom'
                },
                cutoutPercentage: 60,
            },
        });
        
        // 供应商信用等级分布图
        var creditCtx = document.getElementById("supplierCreditChart");
        var creditChart = new Chart(creditCtx, {
            type: 'bar',
            data: {
                labels: [@Html.Raw(string.Join(",", Model.SuppliersByCreditRating.Select(s => "'" + s.Label + "'")))],
                datasets: [{
                    label: "供应商数量",
                    backgroundColor: "#1cc88a",
                    hoverBackgroundColor: "#17a673",
                    borderColor: "#1cc88a",
                    data: [@string.Join(",", Model.SuppliersByCreditRating.Select(s => s.Value))],
                }],
            },
            options: {
                maintainAspectRatio: false,
                layout: {
                    padding: {
                        left: 10,
                        right: 25,
                        top: 25,
                        bottom: 0
                    }
                },
                scales: {
                    xAxes: [{
                        gridLines: {
                            display: false,
                            drawBorder: false
                        },
                        ticks: {
                            maxTicksLimit: 6
                        },
                        maxBarThickness: 25,
                    }],
                    yAxes: [{
                        ticks: {
                            min: 0,
                            maxTicksLimit: 5,
                            padding: 10,
                        },
                        gridLines: {
                            color: "rgb(234, 236, 244)",
                            zeroLineColor: "rgb(234, 236, 244)",
                            drawBorder: false,
                            borderDash: [2],
                            zeroLineBorderDash: [2]
                        }
                    }],
                },
                legend: {
                    display: false
                },
                tooltips: {
                    titleMarginBottom: 10,
                    titleFontColor: '#6e707e',
                    titleFontSize: 14,
                    backgroundColor: "rgb(255,255,255)",
                    bodyFontColor: "#858796",
                    borderColor: '#dddfeb',
                    borderWidth: 1,
                    xPadding: 15,
                    yPadding: 15,
                    displayColors: false,
                    caretPadding: 10,
                },
            }
        });
        
        // 供应商地区分布图
        var regionCtx = document.getElementById("supplierRegionChart");
        var regionChart = new Chart(regionCtx, {
            type: 'pie',
            data: {
                labels: [@Html.Raw(string.Join(",", Model.SuppliersByRegion.Select(s => "'" + s.Label + "'")))],
                datasets: [{
                    data: [@string.Join(",", Model.SuppliersByRegion.Select(s => s.Value))],
                    backgroundColor: ['#1cc88a', '#4e73df', '#36b9cc', '#f6c23e', '#e74a3b', '#858796', '#5a5c69', '#4e5164', '#8bbabb', '#90be6d'],
                    hoverBorderColor: "rgba(234, 236, 244, 1)",
                }],
            },
            options: {
                maintainAspectRatio: false,
                tooltips: {
                    backgroundColor: "rgb(255,255,255)",
                    bodyFontColor: "#858796",
                    borderColor: '#dddfeb',
                    borderWidth: 1,
                    xPadding: 15,
                    yPadding: 15,
                    displayColors: false,
                    caretPadding: 10,
                },
                legend: {
                    display: true,
                    position: 'right'
                },
            },
        });
    </script>
} 